<template>
  <div class="app-page">
    <div class="app-page-toolbar">
      <div class="app-page-toolbar__filter">
        <el-input v-model="list.filter.search" placeholder="请输入内容" />
        <el-select v-model="list.filter.type">
          <el-option label="全部" :value="'all'" />
          <el-option v-for="(value, key) in sources" :key="key" :label="value.text" :value="key" />
        </el-select>
        <el-select v-model="list.filter.question_type">
          <el-option label="全部" :value="'all'" />
          <el-option v-for="(value, key) in question_types" :key="key" :label="value.text" :value="key" />
        </el-select>
        <div style="display: flex;">
          <el-button type="primary" @click="listGet">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="app-page-toolbar__action">
        <el-button type="primary" @click="handleEdit(null)">问题收录</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="app-page-table">
      <el-table v-loading="list.loading" :data="list.data" border style="width: 100%" height="100%" show-overflow-tooltip>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="question_id" label="问题ID" width="120">
          <template #default="{ row }">
            <a-link :link="`https://www.zhihu.com/question/${row.question_id}`">
              #{{ row.question_id }}
            </a-link>
          </template>
        </el-table-column>
        <el-table-column prop="question_title" label="标题" min-width="250" />
        <el-table-column prop="question_author_name" label="作者" min-width="150">
          <template #default="{ row }">
            <user-avatar :avatar="row.author.author_avatar" :name="row.author.author_name"></user-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="question_type" label="问题类型" min-width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="question_types[row.question_type].type" effect="dark">{{ question_types[row.question_type].text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="问题来源" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="sources[row.type].type" effect="dark">{{ sources[row.type].text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="question_created" label="发布时间" width="170" align="center">
          <template #default="{ row }">
            {{ useFormatTime(row.question_created) }}
          </template>
        </el-table-column>
        <el-table-column prop="question_updated" label="修改时间" width="170" align="center">
          <template #default="{ row }">
            {{ useFormatTime(row.question_updated) }}
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center"  fixed="right">
          <template #default="{ row }">
            <el-button type="warning" @click="handleUpdate(row)">更新</el-button>
            <el-button type="primary" @click="handleMark(row)">标记</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page-pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="list.size"
        :current-page="list.page"
        :total="list.total"
        @current-change="handlePageChange"/>
    </div>
    <receiver-dialog v-if="visible" v-model="visible" :detail="item" :author_type="'answer'" @submit="listGet"></receiver-dialog>
    <inclusion-dialog v-if="edit" v-model="edit" :author_id="list.filter.author_id" @submit="listGet"></inclusion-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, type Ref } from 'vue';
import ReceiverDialog from './ReceiverDialog.vue';
import InclusionDialog from './InclusionDialog.vue';
import { useConfirm, useMessage, useTimeFromNow, useFormatTime } from '@/utils/utils';
import http from '@/utils/http'
import type { AuthorInter, ReceiverInter } from '@/typings/interface';
import aLink from '@/components/a-link.vue';
import userAvatar from '@/components/user-avatar.vue';
import { useRoute, useRouter } from 'vue-router';
const question_types: any = {
  commercial: {
    text: '疑似红包',
    type: 'warning'
  },
  normal: {
    text: '普通问题',
    type: 'info'
  },
  redpacket: {
    text: '红包问题',
    type: 'danger'
  }
}
const sources: any = {
  publish: {
    text: '发布问题',
    type: 'primary'
  },
  follow: {
    text: '关注问题',
    type: 'warning'
  },
  answer: {
    text: '回答问题',
    type: 'success'
  },
}
const route = useRoute()
const router = useRouter()
const { author_id } = route.query

const visible = ref(false)
const edit = ref(false)
const item: Ref<ReceiverInter | null> = ref(null)
const list = reactive({
  page: 1,
  size: 10,
  total: 0,
  loading: true,
  filter: {
    search: '',
    type: 'all',
    question_type: 'all',
    author_id: parseInt(author_id  as string || '0')
  },
  data: []
})

// 获取列表
function listGet () {
  list.loading = true
  http('/author/question/list', {
    page: list.page,
    size: list.size,
    ...list.filter,
    type: list.filter.type === 'all' ? '' : list.filter.type,
    question_type: list.filter.question_type === 'all' ? '' : list.filter.question_type
  }).then((res: any) => {
    const { total, items } = res.data
    list.total = total
    list.data = items
    list.loading = false
  })
}
listGet()
// 重置筛选
function resetFilter () {
  list.filter.search = ''
  list.filter.type = 'all'
  list.filter.question_type = 'all'
  listGet()
}
// 监听页码改变
function handlePageChange (value: number) {
  list.page = value
  listGet()
}
// 编辑
function handleEdit (row: AuthorInter | null) {
  item.value = row
  edit.value = true
}
// 删除
function handleDelete (row: AuthorInter) {
  useConfirm('确定删除该条记录吗?').then(() => {
    http('/author/question/delete', {
      id: row.id,
      author_id: list.filter.author_id
    }).then(res => {
      useMessage('删除成功')
      listGet()
    })
  })
}
// 更新
function handleUpdate (row: AuthorInter) {
  http('/author/question/update', {
    id: row.id
  }).then(res => {
    listGet()
  })
}
// 更新
function handleMark (row: AuthorInter) {
  http('/author/question/mark', {
    id: row.id
  }).then(res => {
    listGet()
  })
}
function goBack () {
  router.push({ path: `/${route.meta.type}` })
}
</script>
<style lang="scss">
</style>